<template>
  <div>
    <h3>我的信息</h3>
    <Form ref="form" :model="userInfo" :rules="formValidate" :label-width="100">
      <FormItem label="姓名" prop="name">
        <Input v-model="userInfo.name" style=width:570px></Input>
      </FormItem>
      <FormItem label="性别" prop="sex">
        <Input v-model="userInfo.sex" style=width:570px></Input>
      </FormItem>
      <FormItem label="年龄" prop="age">
        <Input v-model="userInfo.age" style="width:570px"></Input>
      </FormItem>
      <FormItem label="身份证号码" prop="idCard">
        <Input v-model="userInfo.idCard" style="width:570px"></Input>
      </FormItem>
      <FormItem label="社保卡号码" prop="cardNumber">
        <Input v-model="userInfo.cardNumber" style="width:570px"></Input>
      </FormItem>
      <FormItem label="手机号" prop="mobile">
        <Input v-model="userInfo.mobile" style="width:570px"></Input>
      </FormItem>
      <FormItem label="所在地" prop="address">
        <Input v-model="userInfo.address" style="width:570px"></Input>
      </FormItem>
      <FormItem label="保险内容" >
        <Input v-model="userInfo.insuranceName" readonly style=width:570px></Input>
      </FormItem>
      <FormItem label="余额" prop="money">
        <Input v-model="userInfo.money" readonly style="width:570px"></Input>
        <Button type="primary" style="margin-left:10px" @click="addMoneyModal=true">余额充值</Button>
        <Modal v-model="addMoneyModal" draggable :mask="false" title="余额充值" @on-ok="addMoneyFx">
          <Row :gutter="16">
              <Col span="24">
              <InputNumber :max="100000" :min="0" v-model="addMoneyValue" style="width:100%"></InputNumber>
              </Col>
          </Row>
      </Modal>
      </FormItem>
      <Button type="primary" style="margin-left:200px" @click="handleSubmit()" >保存提交</Button>
      <Button type="primary" style="margin-left:30px" @click="getUserInfo()">重置记录</Button>
    </Form>
  </div>
</template>

<script>
import {
  getInfo,
  addMoney,
  editRoster
} from './api.js'
export default {
  name:"VIPIndex",
  data(){
    return{
      addMoneyModal:false,
      addMoneyValue:0,
      userInfo:{},
      formValidate:{},
    }
  },
  created(){
    this.getUserInfo()
  },
  methods:{
      getUserInfo(){
        getInfo().then(res=>{
            this.userInfo = res.result
            
        })
      },
      // 医保充值函数
      addMoneyFx() {
            var that = this;
            addMoney({
                id: that.userInfo.id,
                number: that.addMoneyValue
            }).then(res => {
                if (res.success) {
                    that.getUserInfo()
                    this.$Message.success("充值成功");
                }
            })
        },
        handleSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    editRoster(this.userInfo).then(res => {
                        this.submitLoading = false;
                        if (res.success) {
                            this.$Message.success("操作成功");
                            this.getUserInfo();
                        }
                    });
                }
            });
        },
  }
}
</script>

<style>
Form{
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>